{"componentChunkName":"component---src-templates-studio-page-js","path":"/studio/rocket","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🚀 火箭着陆","noFooter":false,"description":"Threejs + Cannonjs 实现的一个3D火箭自动着陆，火箭发射，LowPoly 风格画面。","date":"2021-10-03","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='458'%3e%3cpath%20d='M275%20118c7%2015%207%2014-2%2016-8%203-20%201-27-3l-6-3-1%205c-1%204-2%206-1%207%202%201%201%203-1%203l-1%2011c0%2012%201%2014%206%2014%202%200%203%200%203-5%200-6%201-7%203-5l5%201c4%200%204%200%202%201l-3%201%203%203%207%203c6%200%204%204-2%206-13%204-14%204-18%202-8-5-8-5-9%205l1%2010%201%206c0%205%200%206%203%207%203%202%204%201%204-4%200-3%200-3%203-2%203%202%204%203%201%205l-2%204c0%201%200%202%201%201%200-1%201-1%203%201%202%201%202%201%201%202-3%203-10%200-9-2%200-2-4-4-6-3l-2-1c0-3-2%201-4%207l-2%207H0v240h401V218H280v-4a6481%206481%200%2001-2-23%20475%20475%200%20005-41c2-17%201-20-6-34l-7-11%205%2013m-9%20132c-4%202-4%202-1%204l2%203h-2c-5%201-5%204%200%208l5%206c1%202%201%202%202-1l1-11c0-6%200-6-2-8-3-1-4-2-5-1m-21%2024c-4%201-7%204-7%208%200%206%206%208%2012%204%207-5%204-14-5-12m-21%2016c-1%201-2%202-2%200-1-2-5-1-7%201s-2%202%200%204v4c-3%203-2%207%201%208l2%202c0%202%206%201%208-1%202-3%203-3%205-2%202%202%206%200%207-2s1-2%202-1c2%201%202%201%203-1%202-2%202-2%202%200s-2%204-5%205-1%203%202%203%207-3%207-5c-1-1%200-2%201-3%206-4%203-12-2-9h-5c-2-2-6-2-9%200-2%201-2%201-2-1%200-4-5-5-8-2'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":0.8738019169329073,"src":"/static/96d5eedc1f3910e312070a9d298666c2/fbb15/rocket.png","srcSet":"/static/96d5eedc1f3910e312070a9d298666c2/82675/rocket.png 500w,\n/static/96d5eedc1f3910e312070a9d298666c2/fef60/rocket.png 1000w,\n/static/96d5eedc1f3910e312070a9d298666c2/fbb15/rocket.png 1094w","srcWebp":"/static/96d5eedc1f3910e312070a9d298666c2/f71dc/rocket.webp","srcSetWebp":"/static/96d5eedc1f3910e312070a9d298666c2/7fe04/rocket.webp 500w,\n/static/96d5eedc1f3910e312070a9d298666c2/d619e/rocket.webp 1000w,\n/static/96d5eedc1f3910e312070a9d298666c2/f71dc/rocket.webp 1094w","sizes":"(max-width: 1094px) 100vw, 1094px"}}},"noGlobalStyles":false,"bannerCredit":null,"slug":"/studio/rocket","tags":["talking"]},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"rocket\",\n  \"title\": \"🚀 火箭着陆\",\n  \"tech\": \"other\",\n  \"date\": \"2021-10-03 16:34:10\",\n  \"description\": \"Threejs + Cannonjs 实现的一个3D火箭自动着陆，火箭发射，LowPoly 风格画面。\",\n  \"titleColor\": \"#774934\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/rocket.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/rocket\"\n  }, \"\\u706B\\u7BAD\\u7740\\u9646\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b5ec66f8-b7e3-58ca-b834-10ab7861d20c","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/widgets.md","id":"1753b377-af77-5e94-aaca-21a3e754e2ea","parent":{"name":"widgets","sourceInstanceName":"studio"},"excerpt":"预览可以到  小部件 Widgets","fields":{"title":"🍱 小部件 Widgets","slug":"/studio/app_widgets","description":"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。","date":"2021-11-03","redirects":null,"datetime":"2021-11-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"app_widgets","date":"2021-11-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"app_widgets\",\n  \"title\": \"🍱 小部件 Widgets\",\n  \"tech\": \"other\",\n  \"date\": \"2021-11-03 16:34:10\",\n  \"description\": \"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/widgets.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/widgets\"\n  }, \"\\u5C0F\\u90E8\\u4EF6 Widgets\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/novus/index.md","id":"55b1090c-b6a1-51f5-91a3-f9c05a8ae594","parent":{"name":"index","sourceInstanceName":"studio"},"excerpt":"相关文章： 📦 实现一个简单朴素的 react 数据管理层 NOVUS ， 📦 改进一个简单朴素的 react 数据管理层 NOVUS 较大型应用： 🌋 WebIDE 的开发记录其一（前言和概览） 集中管理数据状态模型，并且享受 TypeScript 的便利，从明天起，做一个幸福的人，不去关心同步异步、不去关心一个逻辑写多处、不去关心复杂的心智模型、不去关心不可推断的运行时错误。从今以后简单点，只关心数据和变更，只使用代码提示，就此一生，完成项目。 点击按钮尝试 demo…","fields":{"title":"💾 数据管理层 NOVUS","slug":"/studio/novus","description":"React、TypeScript 友好、不需要模板代码、集中式的数据模型、心智简单、足够使用。","date":"2021-09-07","redirects":null,"datetime":"2021-09-07 22:50:20","categories":[],"series":null,"tags":["novus","model"],"status":"online"},"frontmatter":{"published":null,"tags":["novus","model"],"theme":null,"slug":"novus","date":"2021-09-07 22:50:20"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"novus\",\n  \"title\": \"💾 数据管理层 NOVUS\",\n  \"tech\": \"javascript\",\n  \"date\": \"2021-09-07 22:50:20\",\n  \"description\": \"React、TypeScript 友好、不需要模板代码、集中式的数据模型、心智简单、足够使用。\",\n  \"titleColor\": \"#dcdcdc\",\n  \"btnStyle\": \"darkBlue\",\n  \"contentPadding\": \"3% 10% 0\",\n  \"tags\": [\"novus\", \"model\"],\n  \"banner\": \"../studios/novus.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u76F8\\u5173\\u6587\\u7AE0\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus\"\n  }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \"\\uFF0C\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus-2\"\n  }, \"\\uD83D\\uDCE6 \\u6539\\u8FDB\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\")), mdx(\"p\", null, \"\\u8F83\\u5927\\u578B\\u5E94\\u7528\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/workpad-part-1\"\n  }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E00\\uFF08\\u524D\\u8A00\\u548C\\u6982\\u89C8\\uFF09\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u96C6\\u4E2D\\u7BA1\\u7406\\u6570\\u636E\\u72B6\\u6001\\u6A21\\u578B\\uFF0C\\u5E76\\u4E14\\u4EAB\\u53D7 TypeScript \\u7684\\u4FBF\\u5229\\uFF0C\\u4ECE\\u660E\\u5929\\u8D77\\uFF0C\\u505A\\u4E00\\u4E2A\\u5E78\\u798F\\u7684\\u4EBA\\uFF0C\\u4E0D\\u53BB\\u5173\\u5FC3\\u540C\\u6B65\\u5F02\\u6B65\\u3001\\u4E0D\\u53BB\\u5173\\u5FC3\\u4E00\\u4E2A\\u903B\\u8F91\\u5199\\u591A\\u5904\\u3001\\u4E0D\\u53BB\\u5173\\u5FC3\\u590D\\u6742\\u7684\\u5FC3\\u667A\\u6A21\\u578B\\u3001\\u4E0D\\u53BB\\u5173\\u5FC3\\u4E0D\\u53EF\\u63A8\\u65AD\\u7684\\u8FD0\\u884C\\u65F6\\u9519\\u8BEF\\u3002\\u4ECE\\u4ECA\\u4EE5\\u540E\\u7B80\\u5355\\u70B9\\uFF0C\\u53EA\\u5173\\u5FC3\\u6570\\u636E\\u548C\\u53D8\\u66F4\\uFF0C\\u53EA\\u4F7F\\u7528\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u5C31\\u6B64\\u4E00\\u751F\\uFF0C\\u5B8C\\u6210\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u70B9\\u51FB\\u6309\\u94AE\\u5C1D\\u8BD5 demo\\uFF1A\"), mdx(CodeWithPreview, {\n    withTitle: true,\n    preview: mdx(ExampleTodoExample, {\n      mdxType: \"ExampleTodoExample\"\n    }),\n    mdxType: \"CodeWithPreview\"\n  }), mdx(\"h2\", null, \"\\u4EE3\\u7801\"), mdx(SourceCodeLink, {\n    url: \"https://cnb.cool/ubug/novus/novus\",\n    name: \"NOVUS\",\n    desc: \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4F7F\\u7528\\u8303\\u4F8B\\uFF1A\"), mdx(CodeWithPreview, {\n    column: true,\n    titleBar: \"novus.tsx\",\n    codes: [{\n      name: \"example1.ts\",\n      code: novus_studio_novusCodeStr\n    }, {\n      name: \"example2.ts\",\n      code: novus_studio_novusCodeStr1\n    }, {\n      name: \"example3.ts\",\n      code: novus_studio_novusCodeStr2\n    }],\n    withTitle: true,\n    mdxType: \"CodeWithPreview\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}